import React from 'react'
// import logo from '../../assets/logo.svg';
import logo from '../../assets/logo.svg'
import styles from './Header.module.css'
import { Layout, Typography, Input, Dropdown, Menu, Button } from 'antd'
import { GlobalOutlined } from '@ant-design/icons'
import { withRouter, RouteComponentProps } from 'react-router-dom'
import store from '../../redux/store'
import { LanguageState } from '../../redux/languageReducer'
import { withTranslation, WithTranslation } from 'react-i18next'
interface State extends LanguageState { }
// 以高阶组件的形式实现header
class HeaderComponent extends React.Component<RouteComponentProps & WithTranslation, State> {
  constructor(props) {
    super(props)
    const storeState = store.getState()
    this.state = {
      language: storeState.language,
      languageList: storeState.languageList
    }
    store.subscribe(this.handleStoreChange)
  }
  handleStoreChange = () => {
    const storeState = store.getState()
    this.setState({
      language: storeState.language,
      languageList: storeState.languageList
    })
  }
  languageChangeHandle = (e) => {
    if (e.key === 'new') {
      const action = {
        type: 'add_language',
        payload: { name: '新语言', code: 'new_lang_' + Math.random() }
      }
      store.dispatch(action)
    } else {
      const action = {
        type: 'change_language',
        payload: e.key
      }
      store.dispatch(action)
    }
  }
  render() {
    const { language, languageList } = this.state
    const { history, t } = this.props
    return <div className={styles["app-header"]}>
      <div className={styles["top-header"]}>
        <div className={styles.inner}>
          <span onClick={() => { history.push('/') }}>
            <Typography.Text>{t("header.slogan")}</Typography.Text>
            <Dropdown.Button style={{ marginLeft: 15 }} overlay={
              <Menu>
                {
                  languageList.map(lang => {
                    return <Menu.Item key={lang.code} onClick={this.languageChangeHandle}>{lang.name}</Menu.Item>
                  })
                }
                <Menu.Item key="new" onClick={this.languageChangeHandle}>新增语言</Menu.Item>
              </Menu>
            } icon={<GlobalOutlined />}>
              {language === 'en' ? 'English' : '中文'}
            </Dropdown.Button>
          </span>
          <Button.Group className={styles["button-group"]}>
            <Button onClick={() => { history.push('/register') }}>注册</Button>
            <Button onClick={() => { history.push('/signIn') }}>登录</Button>
          </Button.Group>
        </div>
      </div>
      <Layout.Header className={styles["main-header"]}>
        <img src={logo} alt="" className={styles["App-logo"]} />
        <Typography.Title level={3} className={styles.title}>React 旅游网</Typography.Title>
        <Input.Search
          placeholder="请输入旅游目的地、主题、或关键字" className={styles["search-input"]} />
      </Layout.Header>
      <Menu mode={"horizontal"} className={styles["main-menu"]}>
        <Menu.Item key={1}>旅游首页</Menu.Item>
        <Menu.Item key={2}>周末游</Menu.Item>
        <Menu.Item key={3}>跟团游</Menu.Item>
        <Menu.Item key={4}>自由行</Menu.Item>
        <Menu.Item key={5}>私家团</Menu.Item>
        <Menu.Item key={6}>邮轮</Menu.Item>
        <Menu.Item key={7}>酒店+景点</Menu.Item>
        <Menu.Item key={8}>当地玩乐</Menu.Item>
        <Menu.Item key={9}>主题游</Menu.Item>
        <Menu.Item key={10}>定制游</Menu.Item>
        <Menu.Item key={11}>游学</Menu.Item>
        <Menu.Item key={12}>签证</Menu.Item>
        <Menu.Item key={13}>企业游</Menu.Item>
        <Menu.Item key={14}>高端游</Menu.Item>
        {/* <Menu.Item key={15}>爱玩户外</Menu.Item>
      <Menu.Item key={16}>保险</Menu.Item> */}
      </Menu>
    </div>
  }
}

// export const Header = withRouter(HeaderComponent)
export const Header = withTranslation()(withRouter(HeaderComponent))